<template>
  <div>
    <k-form ref="form" @submit="onClickSave" class="ke__padding">
      <el-table :data="showList" v-loading="loading">
        <el-table-column width="65" label="删除?" align="center">
          <template slot-scope="{ row, $index }">
            <el-checkbox :value="deleteId.indexOf(row.id) > -1"
                         @change="onChangeDelete($event, $index)"/>
          </template>
        </el-table-column>

        <el-table-column label="学校名称">
          <template slot-scope="{ row }">
            <el-input v-model="row.name" @input="onInput(row, 'name', $event)"/>
          </template>
        </el-table-column>

        <el-table-column label="显示顺序" width="100">
          <template slot-scope="{ row }">
            <el-input v-model="row.sort" @input="onInput(row, 'sort', $event)"/>
          </template>
        </el-table-column>
      </el-table>

      <div class="ke__margin-top">
        <el-button type="primary" :loading="subing" native-type="submit">保存</el-button>
      </div>
    </k-form>
  </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
import { v4 as uuidv4 } from 'uuid'
@Component
export default class SchoolIndex extends Vue {
  list = []
  inserts = [] // 需要插入的数据
  updates = [] // 需要更新的数据
  deleteId = [] // 需要删除的数据
  loading = true
  subing = false

  get showList() {
    return this.list.concat(this.inserts)
  }

  mounted () {
    this.inserts.push({
      _id: uuidv4()
    })
    this.onLoad()
  }

  // 加载列表数据
  onLoad () {
    this.loading = true
    this.$http.get('admin/school')
      .finally(() => this.loading = false)
      .then(result => {
        this.list = result.list.map((item) => {
          item.stateText = item.is_disabled ? '禁用' : '启用'
          return item
        })
      })
  }

  // 输入回调
  onInput (row, column, value) {
    if (row.id) {
      const idx = this.updates.findIndex(item => item.id === row.id)
      if (idx === -1) {
        this.updates.push({
          id: row.id,
          [column]: value
        })
      } else {
        KE.array.update(this.updates, row.id, {
          [column]: value
        })
      }
    }

    if (column === 'name' && value) {
      const idx = this.inserts.findIndex(item => item._id === row._id)
      if (idx === this.inserts.length - 1) {
        this.inserts.push({
          _id: uuidv4()
        })
      }
    }
  }

  // 删除勾选
  onChangeDelete (val, idx) {
    if (this.showList[idx].id) {
      if (val) {
        this.deleteId.push(this.showList[idx].id)
      } else {
        this.deleteId.splice(this.deleteId.indexOf(this.showList[idx].id), 1)
      }
    } else {
      KE.array.update(this.inserts, this.showList[idx]._id, {
        _delete: val
      }, '_id')
    }
  }

  // 提交保存
  onClickSave () {
    let form = {
      inserts: this.inserts.filter((item) => {
        return !item._delete && item.name
      }),
      updates: this.updates,
      deletes: this.deleteId
    }
    if (form.inserts.length === 0 && form.updates.length === 0 && form.deletes.length === 0) {
      this.$message.error('没有更改,无需更新')
      return
    }
    this.subing = true
    this.$http.post('admin/school/save', form)
      .finally(() => this.subing = false)
      .then((result) => {
        if (result.res_code === 0) {
          this.$message.success('保存成功')
          this.inserts = [{
            _id: KE.timestamp()
          }]
          this.updates = []
          this.deleteId = []
          this.onLoad()
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }
}
</script>

<style scoped>

</style>
